<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <el-form :inline="true" :model="formData" class="demo-form-inline" ref="form">
          <el-form-item label="课程名称" prop="phone">
            <el-input v-model="formData.courseName" placeholder="课程名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="formData.status" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
          <el-button class="create-button" type="info" @click="handleCreate">
             <i class="el-icon-plus"></i>新建课程
          </el-button>
        </el-form>
      </div>
      <template>
        <el-table :data="courseData" style="width: 100%">
          <el-table-column prop="id" label="ID" width="100">
          </el-table-column>
          <el-table-column prop="courseName" label="课程名称">
          </el-table-column>
          <el-table-column prop="price" label="价格" width="150">
          </el-table-column>
          <el-table-column prop="sortNum" label="排序" width="150">
          </el-table-column>
          <el-table-column prop="status" label="状态" width="50">
            <template slot-scope="scope">
              <i v-if="scope.row.status" class="el-icon-success" style="color: green;"></i>
              <i v-else class="el-icon-error" style="color: red;"></i>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="250">
            <template slot-scope="scope">
              <el-button size="mini"
              @click="handleChange(scope.row)">{{ scope.row.status?'下架':'上架' }}</el-button>
              <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button size="mini" @click="handleSection(scope.row)">内容管理</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="formData.currentPage"
          :page-sizes="[10, 15, 20]" :page-size="formData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </template>
    </el-card>
  </div>
</template>

<script>
// eslint-disable-next-line
import { getCourses,CourseChangeState } from '@/services/course';

export default {
  name: 'LessonManage',
  created() {
    this.loadCourses();
  },
  data() {
    return {
      dialogFormVisible: false,
      formData: {
        currentPage: 1,
        pageSize: 10,
        courseName: '',
        status: -1,
      },
      options: [
        { label: '全部', value: -1 },
        { label: '上架', value: 1 },
        { label: '下架', value: 0 },
      ],
      courseData: [],
      total: 0,
    };
  },
  methods: {
    async loadCourses() {
      const { ...queryData } = this.formData;
      if (queryData.status === -1) {
        delete queryData.status;
      }
      const { data } = await getCourses(queryData);
      if (data.code === '000000') {
        this.courseData = data.data.records;
        this.total = data.data.total;
      }
    },
    onSubmit() {
      this.loadCourses();
    },
    onReset() {
      this.$refs.form.resetFields();
    },
    formatter(row) {
      const date = new Date(row.createTime);
      return date.toLocaleString();
    },
    handleSizeChange(val) {
      this.formData.pageSize = val;
      this.formData.currentPage = 1;
      this.loadCourses();
    },
    handleCurrentChange(val) {
      this.formData.currentPage = val;
      this.loadCourses();
    },
    /* eslint no-param-reassign: "error" */
    async handleChange(rowData) {
      const status = rowData.status ? 0 : 1;
      const courseId = rowData.id;
      const { data } = await CourseChangeState({ courseId, status });
      const info = status ? '上架' : '下架';
      if (data.code === '000000') {
        rowData.status = status;
        this.$message.success(`${info}成功`);
      } else {
        this.$message.error(`${info}失败`);
      }
    },
    handleCreate() {
      this.$router.push({ name: 'addlesson' });
    },
    handleEdit(rowData) {
      this.$router.push({ name: 'editlesson', params: { id: rowData.id } });
    },
    handleSection(rowData) {
      console.log(rowData.courseName);
      this.$router.push({ name: 'section', params: { id: rowData.id } });
    },
  },
};
</script>

<style>
.create-button {
  float: right;
}
</style>
